<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  男生： <input type="text" id="man">
  <br>
  女生：<input type="text" id="girl">
  <div id="show"></div>
  <button id="btn">测试缘分</button>
  <script>
    //
    // 一个男生和一个女生各输入自己的出生月份，可以验证他们的缘分如何
    // 公式 = 男生月份 % 女生月份
    // 0　有恋爱的缘分，可以终成眷属
    // 1　有恋爱的缘分，但未必成为眷属
    // 2　有朋友的缘分，可以发展成为恋人
    // 3　有朋友的缘分，但未必可以发展成为恋人
    // 编写函数，分别传入男生月份和女生月份，返回他们的缘分
    var btn = document.getElementById("btn")
    var man = document.getElementById("man");
    var girl = document.getElementById("girl");
    var show = document.getElementById("show");

    btn.onclick = function () {

      var str = "" //存放缘分的str
      var manMonth = parseInt(man.value);
      var girlMonth = parseInt(girl.value);

      if (manMonth % girlMonth == 0) {
        str = "有恋爱的缘分，可以终成眷属"
      } else if (manMonth % girlMonth == 1) {
        str = "有恋爱的缘分，但未必成为眷属"
      } else if (manMonth % girlMonth == 2) {
        str = "有朋友的缘分，可以发展成为恋人"
      } else if (manMonth % girlMonth == 3) {
        str = "有朋友的缘分，但未必可以发展成为恋人"
      } else {
        str = "互相离远点"
      }
      show.innerHTML = str;//显示缘分的str
    }




  </script>
</body>

</html>